<script setup>
import { ref, onMounted, toRefs } from 'vue'
import {unit2} from '../unit.js'
import link from '../link.js'

defineProps({
    config: Object,
});

</script>

<template>

    <div class="flexrow justify-evenly">
        <div class="iconbox" v-for="(item, index) in config?.list"
        :style="{
            width: unit2(config.width, config.width_unit),
            margin: unit2(config?.margin1) + ' ' + unit2(config?.margin2),
        }" @click="link(item, config.linknull)">
            <img class="icon objcover" :style="{
                width: '100%',
                height: unit2(config.height, config.height_unit),
                borderRadius: unit2(config?.borderRadius),
            }" :src="item.url" :alt="item.name" />
            <h2 class="ellipsis" :style="{
                fontSize: unit2(config?.fontSize),
                color: config?.color
            }">{{ item.name }}</h2>
        </div>
        <div class="iconbox rowspace" :style="{
            width: unit2(config.width, config.width_unit),
            margin: '0 ' + unit2(config?.margin2),
        }"></div>
        <div class="iconbox rowspace" :style="{
            width: unit2(config.width, config.width_unit),
            margin: '0 ' + unit2(config?.margin2),
        }"></div>
        <div class="iconbox rowspace" :style="{
            width: unit2(config.width, config.width_unit),
            margin: '0 ' + unit2(config?.margin2),
        }"></div>
        <div class="iconbox rowspace" :style="{
            width: unit2(config.width, config.width_unit),
            margin: '0 ' + unit2(config?.margin2),
        }"></div>
        <div class="iconbox rowspace" :style="{
            width: unit2(config.width, config.width_unit),
            margin: '0 ' + unit2(config?.margin2),
        }"></div>

    </div>


</template>

<style scoped>
    .iconbox{
        display: block; margin: 10px;overflow: hidden;
        text-align: center; cursor: pointer;
    }
    .iconbox h2{margin: 8px auto 0;padding: 0;line-height: 1.5;}
    .iconbox .icon{display: block; margin: 0 auto; overflow: hidden;background-color: #e3f3ff;}
</style>